<template>
  <div>
    <div>{{ state.name }}--{{ state.age }}</div>
    <button @click="addFn">点击</button>
  </div>
</template>
<script>
import { reactive, toRaw, markRaw } from "vue";
export default {
  /**
   * toRaw
   * 获取双向绑定前的原始数据
   */
  // markRaw表示数据用远不要被代理 追踪  双向绑定
  setup() {
    let obj = { name: "zs", age: 14 }; //原始数据  更改此数据时ui界面不会被更新
    let state = reactive(obj);
    let obj2 = toRaw(state);

    // let obj2 = toRaw(state.value);  获取ref的数据

    function addFn() {
      // 像这样一直操作state的数据的话 state里面数据一旦发生变化 就会触发ui的更新
      state.name = "ls";
      // 导致性能损失 所以可以使用toRaw()方法进行抽取原始数据进行修改然后不让ui触发更新  这样会极大提升性能
      obj2.name = "ls";
      state = reactive(obj2);
      console.log(state);
    }
    return {
      state,
      addFn,
    };
  },
};
</script>
